<template>
    <div ref="split-cont">
        <slot></slot>
    </div>
</template>
<script>
    export default {
        name:'ui-split-screen-cont',
        props:{
            left:{
                type: String,
                default: '300'
            },
            right:String
        },
        data() {
            return {}
        },
        mounted(){
            const el = this.$refs['split-cont']
            this.$nextTick(() => {
                if (this.$parent.right) {
                    // 右侧有配置时
                    if (el.nextSibling) {
                        el.className = 'ui item flex one'
                    }else{
                        el.className = 'ui item flex'
                        el.style.width = (this.right.indexOf('%') > -1) ? this.right : this.right + 'px'

                    }
                }else{
                    // 默认配置或左侧有配置
                    if (el.nextSibling) {
                        el.className = 'ui item flex'
                        // el.style.width = this.left + 'px'
                        el.style.width = (this.left.indexOf('%') > -1) ? this.left : this.left + 'px'
                    }else{
                        el.className = 'ui item flex one'
                    }
                }
                this.addScroll(el)
            })


        },
        methods: {
            addScroll(el) {
                // console.log(el.childNodes[0])
                if (el.childNodes[0]) {
                    el.childNodes[0].className = 'ui pos-a h-100p w-100p scrollbar scroll-no-track scroll-teal'
                }else{
                    // 监听dom发生变化
                    window['ui-split-screen-cont'] = new MutationObserver(function(mutationRecord, observer) {
                        /*console.log(mutationRecord, observer)
                        console.log(mutationRecord[0].addedNodes.length)*/
                        // 当出现子节点后执行
                        if (mutationRecord[0].addedNodes.length > 0) {
                            // console.log(el.childNodes)
                            el.childNodes[0].className = 'ui pos-a h-100p w-100p scrollbar scroll-no-track scroll-teal'
                        }
                    })
                    window['ui-split-screen-cont'].observe(
                        el, {
                            // attributes: true,
                            // subtree: true,
                            childList: true
                        })
                }
            }
        }
    }
</script>


